/**
 * @desc 表单组件
 * @props {pageNumber} 当前页数
 */
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import {
  Form,
  Button,
  Checkbox,
  Radio,
  Select,
  DatePicker,
  InputNumber,
  Space
} from "antd";
import FormInput from "@/components/FormItem/FormInput";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import FormUpload from "@/components/FormItem/FormUpload";
const Item = Form.Item;

class TheFormData extends Component {
  formRef = React.createRef();
  onFinish = value => {
    //todo
    //this.props.handleOk();
  };
  componentDidMount() {}
  render() {
    const { dialogType, handleCancel } = this.props;
    const disabledStatus = dialogType === "check";
    const options = [
      { value: 1, label: "男" },
      { value: 2, label: "女" }
    ];
    return (
      <Form
        ref={this.formRef}
        labelCol={{ span: 6 }}
        onFinish={this.onFinish}
        wrapperCol={{ span: 16 }}
      >
        <Item
          name="input"
          rules={[{ required: true, message: "" }]}
          label="input"
        >
          <FormInput data={{ disalbed: disabledStatus }} />
        </Item>
        <Item
          name="select"
          rules={[{ required: true, message: "" }]}
          label="select"
        >
          <Select
            options={options}
            disabled={disabledStatus} allowClear
            placeholder="请选择性别"
          />
        </Item>
        <Item
          name="radio"
          rules={[{ required: true, message: "" }]}
          label="radio"
        >
          <Radio.Group options={options} disabled={disabledStatus} value={1} />
        </Item>
        <Item
          name="Checkbox"
          rules={[{ required: true, message: "" }]}
          label="Checkbox"
        >
          <Checkbox.Group
            options={options}
            disabled={disabledStatus}
            value={1}
          />
        </Item>
        <Item
          name="InputNumber"
          rules={[{ required: true, message: "" }]}
          label="InputNumber"
        >
          <InputNumber min={1} max={10} />
        </Item>
        <Item
          label="upload"
          rules={[{ required: true, message: "" }]}
          label="upload"
        >
          <FormUpload disabled={disabledStatus} />
        </Item>
        <Item
          label="DatePicker"
          rules={[{ required: true, message: "" }]}
          label="DatePicker"
        >
          <DatePicker />
        </Item>
        <div className="p-text-align">
          <Space size="large">
            <Button key="back" onClick={handleCancel}>
              取 消
            </Button>
            {!disabledStatus && (
              <Button type="primary" htmlType="primary">
                确 定
              </Button>
            )}
          </Space>
        </div>
      </Form>
    );
  }
}
TheFormData.propTypes = {};
TheFormData.defaultProps = {};
const mapStateToProps = state => {
  return {};
};
const mapDispatchToProps = dispatch => {
  return {};
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(TheFormData));
